<template>
  <!-- 商品分类页面 -->
  <div class="com-page">
    <el-card class="box-card">
      <!-- 添加分类按钮 -->
      <el-button type="primary" @click="showDialog">添加分类</el-button>
      <!-- 树形表格开始 -->
      <zk-table
        ref="table"
        sum-text="sum"
        index-text="#"
        :data="data"
        :columns="columns"
        :stripe="props.stripe"
        :border="props.border"
        :show-header="props.showHeader"
        :show-summary="props.showSummary"
        :show-row-hover="props.showRowHover"
        :show-index="props.showIndex"
        :tree-type="props.treeType"
        :is-fold="props.isFold"
        :expand-type="props.expandType"
        :selection-type="props.selectionType"
      >
        <!-- 是否有效 -->
        <template slot="isok" scope="scope">
          <i
            class="el-icon-error"
            v-if="scope.row.cat_deleted === false"
            style="color: red; font-size: 18px"
          ></i>
          <i
            class="el-icon-success"
            v-if="scope.row.cat_deleted"
            style="color: green; font-size: 18px"
          ></i>
        </template>
        <!-- 排序 -->
        <template slot="order" scope="scope">
          <el-tag v-if="scope.row.cat_level == 0">一级</el-tag>
          <el-tag type="success" v-if="scope.row.cat_level == 1">二级</el-tag>
          <el-tag type="warning" v-if="scope.row.cat_level == 2">三级</el-tag>
        </template>
        <!-- 操作 -->
        <template slot="opt">
          <el-button type="primary" icon="el-icon-edit">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete">删除</el-button>
        </template>
      </zk-table>

      <!-- 分页部分开始 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="param.pagenum"
        :page-sizes="[3, 5, 8, 11]"
        :page-size="param.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 添加分类对话框 -->
    <AddCateDialog
      :dialogVisible="dialogVisible"
      @closeDialog="closeDialog"
      ref="AddCateDialogRef"
    ></AddCateDialog>
  </div>
</template>

<script>
import AddCateDialog from "@/components/addCate";
import { request } from "@/utils/axios.js";
export default {
  components: { AddCateDialog },
  props: {},
  data() {
    return {
      dialogVisible: false,
      props: {
        stripe: false,
        border: true,
        showHeader: true,
        showSummary: false,
        showRowHover: true,
        showIndex: true,
        treeType: true,
        isFold: true,
        expandType: false,
        selectionType: false,
      },
      data: [],
      columns: [
        {
          label: "分类名称",
          prop: "cat_name",
          width: "400px",
        },
        {
          label: "是否有效",
          type: "template",
          template: "isok",
          minWidth: "50px",
        },
        {
          label: "排序",
          type: "template",
          template: "order",
          minWidth: "50px",
        },
        {
          label: "操作",
          type: "template",
          template: "opt",
          minWidth: "50px",
        },
      ],
      param: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },
      total: 0,
    };
  },
  watch: {},
  computed: {},
  methods: {
    async getData() {
      const { data: ret } = await request.get("categories", {
        params: this.param,
      });
      this.data = ret.data.result;
      this.total = ret.data.total;
    },
    // 改变页面显示条数的方法
    handleSizeChange(val) {
      this.param.pagesize = val;
      this.getData();
    },
    // 改变当前页数的方法
    handleCurrentChange(val) {
      this.param.pagenum = val;
      this.getData();
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    showDialog() {
      this.dialogVisible = true;
      this.$refs.AddCateDialogRef.getData();
    },
  },

  created() {
    this.getData();
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.zk-table {
  margin: 20px 0;
}
</style>